* {
	margin:  0;
	padding: 0;
}
.display-none{
	display: none;
}
html, body {
	width:        100%;
	height:       100%;
	font-family: 'robotolight', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}
#vidyoConnectorApp {
}
#options {
	position:   absolute;
	top:        0px;
	left:       0px;
	bottom:     60px;
	width:      375px;
	text-align: center;
	z-index:    99;
	overflow-y: scroll;
}

#rendererContainer {
	position: absolute;
	top:      0px;
	right:    0px;
	left:     375px;
	bottom:   60px;
	z-index:  99;
}
#renderer0 {
	position:         absolute;
	top:              0px;
	width:            100%;
	left:             0%;
	right:            0%;
	bottom:           0px;
	background-color: darkgray;
}
#renderer1 {
	position:         absolute;
	width:            0px;
	background-color: gray;
}
#renderer2 {
	position:         absolute;
	width:            0px;
	background-color: darkgray;
}
#renderer3 {
	position:         absolute;
	width:            0px;
	background-color: gray;
}
#renderer4 {
        position:         absolute;
	width:            0px;
        background-color: darkgray;
}
#renderer5 {
        position:         absolute;
	width:            0px;
        background-color: gray;
}
#renderer6 {
        position:         absolute;
	width:            0px;
        background-color: darkgray;
}
#renderer7 {
        position:         absolute;
	width:            0px;
        background-color: gray;
}
#renderer8 {
        position:         absolute;
	width:            0px;
        background-color: darkgray;
}

#helper {
	position:    absolute;
	top:         0px;
	left:        0px;
	width:       100%;
	height:      100%;
	background:  white;
	color:       #5d5d5d;
	font-weight: 300;
}
#helper table {
	max-width: 1200px;
	height:    100%;
	margin:    auto;
}
#helper td {
	vertical-align: middle;
	text-align:     center;
	width:          800px;
	padding:        10px;
}
#helper img {
	vertical-align: middle;
}
.helperCheck {
	vertical-align: middle;
	text-align:     left;
	padding:        10px;
}
.helperHeader, .helperFooter {
	padding: 30px 0px;
}
#helperText {
	font-size: 36px;
}
#helperText p {
	font-size: 16px;
}

.helperFooter a {
	font-size:        18px;
	text-align:       center;
	text-decoration:  none;
	background-color: #83C36D;
	display:          inline-block;
	padding:          14px 0px 14px 0px;
	color:            white;
	font-weight:      normal;
	width:            200px;
	margin:           auto;
	border-radius:    5px;
}
#helper ul {
	display:         inline-block;
	list-style-type: none;
}

.toolbar {
	position:         absolute;
	bottom:           0px;
	height:           60px;
	text-align:       center;
	background-color: rgb(19, 38, 58);
}

#toolbarLeft {
	left:  0%;
	right: 70%;
	width: 30%;
}
#toolbarCenter {
	left:  30%;
	right: 30%;
	width: 40%;
}
#toolbarRight {
	left:  70%;
	right: 0%;
	width: 30%;
}
.hidden {
	display: none;
}
.optionsHide {
	display: none;
}
.optionsHidePermanent {
	display: none;
}
#error {
	color:     red;
	font-size: 50%;
}
#message {
	font-size: 50%;
}
#participantStatus {
	color:       white;
	line-height: 60px;
	margin:      0px 10px;
	position:    absolute;
	left:        0px;
}
#connectionStatus {
	color:       white;
	line-height: 50px;
	margin:      0px 10px;
	position:    absolute;
	right:       0px;
	bottom:      10px;
}
#clientVersion {
	color:       white;
	line-height: 10px;
	margin:      0px 10px;
	position:    absolute;
	right:       0px;
	bottom:      3px;
	font-size:   75%;
}
#options form  { }
#options p     { text-align: center; }
#options label { display: inline-block; width:100px; margin: 5px; padding: 4px; text-align: right; }
#options input { display: inline-block; width:200px; margin: 5px; padding: 4px; }
#options select{ display: inline-block; width:200px; margin: 5px; padding: 4px; }

.logo {
	margin: 20px;
	width:  300px;
}
.toolbarButton {
	width:               100px;
	height:              60px;
	background-size:     32px auto;
	background-repeat:   no-repeat;
	background-position: center;
	background-color:    rgb(19, 38, 58);
	border:              0;
}

.cameraOn      { background-image: url(Images/cameraOn.png); }
.cameraOff     { background-image: url(Images/cameraOff.png); }
.microphoneOn  { background-image: url(Images/microphoneOn.png); }
.microphoneOff { background-image: url(Images/microphoneOff.png); }
.callStart     { background-image: url(Images/callStart.png); }
.callEnd       { background-image: url(Images/callEnd.png); }

/* Renderer Layout CSS */
.pluginOverlay .videoContainer .frame video {
	background-image:    url(Images/default_profile.svg);
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     33%;
}

